<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <template1></template1>
        <my-template1></my-template1>
    </div>

    <div id="app2">
        <!-- 全局组件可以在多个Vue实例中使用 -->
        <template1></template1>
        <!-- // 父组件向子组件传值 -->
        <my-template2 v-for="item,index in lists" :item="item" :index="index+1"></my-template2>
        <!-- v-bind省略成: -->
        <!-- <my-template2 v-for="item in lists" v-bind:item="item"></my-template2> -->
        <my-template-parent></my-template-parent>
        <my-father></my-father>
    </div>

    <template id="my-template-parent">
        <div>
            <my-template-child>
                <h1 slot="this-solt">插槽内容</h1>
            </my-template-child>
        </div>
    </template>

    <template id="my-template1">
        <!-- 注意, 模板的根标签只能有一个 => 如果有多个根标签，使用div包裹起来 -->
        <div>
            <h2>myTemplate1</h2>
            <h2>myTemplate1</h2>
        </div>
    </template>

    <template id="my-template2">
        <div>
            <!-- 子组件使用父组件传进来的值 -->
            <li style="color: rebeccapurple; background-color: antiquewhite; font-size: large;">
                {{item}} | {{index}}</li>
        </div>
    </template>

    <template id="my-father">
        <div>
            <h3>父组件接收到子组件传递的数据:</h3>
            <input type="text" v-model="fatherText">
            </br>
            <my-child @textchanged="getText" />
        </div>
    </template>

    <template id="my-child">
        <div>
            <h3>子组件发送给父组件的数据:</h3>
            <input type="text" v-model="text01">
        </div>
    </template>

    <script src="js/vue.2.1.3.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        Vue.component('template1', {
            template: '<div><a href="#" @click="temp1alert">{{msg}}</a></div>',
            // 组件的data必须以函数function () {}方法构建，不能直接写json like方法
            data: function () {
                return { msg: 'hello' }
            },
            // 组件可以拥有自己的model和methods !! 
            // 不能持有mounted等钩子方法
            methods: {
                temp1alert: function () {
                    alert("temp1alert!!");
                }
            },
        })
        // 模板名称是驼峰命名法时，使用模板的时候应将大写字母替换为'-'+小写字母
        // 如 myTemplate1 = >my-template1
        Vue.component('myTemplate1', {
            template: '#my-template1',
        })
        Vue.component('myTemplate2', {
            template: '#my-template2',
            // 父组件向子组件传值, 属性命名最好是全小写字母
            // 如果是形如 init-count之类的变量名称, 在{{}}中、以及方法中, 可以使用this.initCount这样的驼峰命名法
            props: ['item', 'index'],
        })

        Vue.component('myFather', {
            template: '#my-father',
            data() {
                return { fatherText: '' }
            },
            methods: {
                getText: function (newText) {
                    console.log("父组件获得的值: ", newText);
                    this.fatherText = newText;
                },
            },
            components: {
                'myChild': {
                    template: '#my-child',
                    data() {
                        return { text01: "子组件的初始值" }
                    },
                    watch: {
                        text01(newText, oldText) {
                            console.log("子组件当前的值: ", newText);
                            this.$emit('textchanged', newText);
                        },
                    },
                }
            },
        })
        // 全局组件必须声明在Vue对象实例化之前
        new Vue({
            el: '#app'
        })
        new Vue({
            el: '#app2',
            // 实例的data必须以对象方式提供
            data: {
                lists: ['text1', 'text2', 'text3']
            },
            props: ['item', 'index'],
            // 局部组件
            components: {
                'myTemplateParent': {
                    template: '#my-template-parent',
                    components: {
                        'myTemplateChild': {
                            // 匿名插槽只能有一个, 具名插槽可以有多个，通过插槽元素的name和待插入元素的slot进行识别
                            template: '<a href="#">这是一个局部子组件&nbsp;&nbsp;<slot name="this-solt">如果没有分发内容则默认提示</slot>&nbsp;&nbsp;</a>'
                        }
                    }
                }
            }
        })
    </script>
    <script>

    </script>
</body>

</html>